<template>
	<view class="body">
		<view class="notice">
			<text>一个单号多件货物，一样品名，一样数量请填写一件包裹数量，件数填写总件数。多个单号多个品名请点加号添加。</text>
		</view>
		<view class="list">
			<view class="order" v-for="(item , index) in list" :key="index">
				<view class="order-content">
					<view class="order-images">
						<view class="images-item insert-btn" v-if="!disabled" @click="insertPopupOpen(index)">
							<!-- <image class="img" src="/static/images/add.png" mode="widthFix"></image> -->
							<view class="insert-txt">请输入品名</view>
						</view>
						
						<scroll-view scroll-x="true" class="images-list">
							<view class="images-item" v-for="(imageItem, imageIndex) in item.images" :key="imageIndex">
								<image :src="imageItem.image" mode="aspectFill"></image>
								<view class="image-del" v-if="!disabled" @click="deleteImage(index, imageIndex)">
									<image src="/static/images/delete-image.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="images-block"></view>
						</scroll-view>
						
						<view class="images-mask"></view>
					</view>
					<view class="order-list">
						<!-- <view class="order-item">
							<view class="order-item-left">
								<text>快递名称</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<input :disabled="disabled" v-model="item.logistics_name" type="text" class="inp" placeholder-class="inp-place" placeholder="请输入快递名称">
								</view>
							</view>
						</view> -->
						
						<view class="order-item">
							<view class="order-item-left">
								<text>品名</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<text class="txt" :disabled="disabled" v-if="item.title">{{item.title}}</text>
									<text class="inp-place" v-else>请点击输入品名</text>
								</view>
							</view>
						</view>
						
						<view class="order-item">
							<view class="order-item-left">
								<text>数量</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<input @focus="submitBtnHide" @blur="submitBtnShow" type="number" :disabled="disabled" v-model="item.good_number" placeholder="单件货物数量" class="inp" placeholder-class="inp-place">
								</view>
							</view>
						</view>
						
						<view class="order-item">
							<view class="order-item-left">
								<text>件数</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<input @focus="submitBtnHide" @blur="submitBtnShow" type="number" :disabled="disabled" v-model="item.good_size" placeholder="请输入总件数" class="inp" placeholder-class="inp-place">
								</view>
							</view>
						</view>
						
						<view class="order-item">
							<view class="order-item-left">
								<text>快递单号</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<input @focus="submitBtnHide" @blur="submitBtnShow" v-model="item.logistics_number" type="text" class="inp" placeholder-class="inp-place" placeholder="请输入单号">
								</view>
							</view>
						</view>
						
						<view class="order-item">
							<view class="order-item-left">
								<text>货物类型</text>
							</view>
							<view class="order-item-right">
								<view class="input">
									<text class="txt" v-if="item.good_type">{{item.good_type}}</text>
									<text class="inp-place" v-else>输入品名后获取</text>
									<image class="img" src="/static/images/right1.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						
						
						
						
						<!-- <picker mode="selector" :disabled="disabled" range-key="name" :range="warsehouseList" @change="warsehouseSelectChange(index, $event)">
							<view class="order-item">
								<view class="order-item-left">
									<text>仓库地点</text>
								</view>
								<view class="order-item-right">
									<view class="input">
										<text class="txt" v-if="item.warsehouseSelectedInfo.warehouse_id">{{item.warsehouseSelectedInfo.name}}</text>
										<text class="inp-place" v-else>请选择仓库</text>
										<image class="img" src="/static/images/right1.png" mode="widthFix"></image>
									</view>
								</view>
							</view>
						</picker> -->
					</view>
				</view>
				
				<view class="delete-btn" @click="itemDelete(index)" v-if="list.length > 1">
					<image src="/static/images/delete002.png" mode="widthFix" class="img"></image>
				</view>
			</view>
		</view>
		<view class="add" @click="addItem">
			<view class="add-icon">
				<u-icon name="plus-circle" color="#E82E2E" size="20"></u-icon>
			</view>
			<view class="add-text">
				<text>添加包裹</text>
			</view>
		</view>
		
		<view class="bottom" :class="{hide: !submitBtnShowStatus}" v-if="!disabled">
			<view class="bottom-content">
				<view class="bottom-btn" @click="submitConfirm">
					<text>确认</text>
				</view>
			</view>
		</view>
		
		<u-popup :show="insertPopupShow" mode="center" bgColor="transparent" @close="insertPopupClose">
			<view class="insert-popup">
				<view class="insert-body">
					<view class="insert-item">
						<view class="item-title">品名</view>
						<view class="item-input">
							<input v-model="insertData.title" type="text" class="inp" placeholder="请输入品名" placeholder-class="inp-place">
						</view>
					</view>
					<view class="insert-item">
						<view class="item-input">
							<image-upload @change="imageChange"></image-upload>
						</view>
						<view class="item-tips">非必传</view>
					</view>
					
					<view class="insert-item">
						<view class="item-input">
							<view class="sub-btn" @click="insertConfirm">确认</view>
						</view>
					</view>
				</view>
				<view class="close-btn">
					<image class="img" @click="insertPopupClose" src="/static/images/close001.png" mode="widthFix"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {getQuantityGoodsType} from '@/api/goods.js';
	import {appointmentOrderEdit, pickExpressAppointmentInsertOrEdit} from '@/api/order.js';
	import {getFaceList} from '@/api/index.js';
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				list:[
					{
						images: [],
						logistics_number: '',
						good_size: '',
						title: '',
						good_type: '',
						good_number: '',
						logistics_name: '',
						warsehouseSelectedInfo: {}
					}
				],
				insertPopupShow: false,
				insertIndex: null,
				insertData: {
					image: '',
					title: ''
				},
				warsehouseList: [],
				submitBtnShowStatus: true
			}
		},
		async onLoad(options) {
			if (!this.isLogin) {
				uni.reLaunch({
					url: '/pages/login/index'
				});
				return;
			}
			await this.loadData();
		},
		computed: {
			...mapState(['isLogin']),
			disabled() {
				return this.type == 'detail';
			}
		},
		methods: {
			submitBtnShow() {
				this.submitBtnShowStatus = true;
			},
			submitBtnHide() {
				this.submitBtnShowStatus = false;
			},
			warsehouseSelectChange(index, event) {
				this.list[index].warsehouseSelectedInfo = this.warsehouseList[event.detail.value];
			},
			async loadWarehouseList() {
				try{
					let res = await getFaceList();
					this.warsehouseList = res.data?.warehouse || [];
				}catch(e){
					
				}
			},
			async loadData() {
				await this.loadWarehouseList();
			},
			async submitConfirm() {
				try{
					if (!this.list || !this.list.length) {
						throw new Error('请先录入数据');
					}
					this.list.forEach(item => {
						if (!item.images || !item.images.length) {
							throw new Error('请输入品名');
						}
						/* if (!item.logistics_name) {
							throw new Error('请输入快递名称');
						} */
						if (!item.logistics_number) {
							throw new Error('请输入快递单号');
						}
						if (!item.good_size) {
							throw new Error('请输入件数');
						}
						if (!item.good_number) {
							throw new Error('请输入数量');
						}
						if (!item.good_type) {
							throw new Error('货物类型异常');
						}
						/* if (!item.warsehouseSelectedInfo.warehouse_id) {
							throw new Error('请选择仓库');
						} */
					});
					uni.showLoading({
						title: '加载中'
					});
					for (let item of this.list) {
						let data = {
							is_pc: 1,
							come_type: 1,
							// warehouse: item.warsehouseSelectedInfo.warehouse_id,
							good: [{
								logistics_number: item.logistics_number,
								good_size: item.good_size,
								good_number: item.good_number,
								good_type: item.good_type,
								good_quantity: item.images.map(i => i.title),
								good_pic: item.images.map(i => i.image),
								// logistics_name: item.logistics_name
							}]
						};
						await pickExpressAppointmentInsertOrEdit(data);
					}
					uni.hideLoading();
					uni.showToast({
						title: '操作成功',
						icon: 'none'
					});
					this.list = [{
						images: [],
						logistics_number: '',
						good_size: '',
						title: '',
						good_type: '',
						good_number: '',
						logistics_name: '',
						warsehouseSelectedInfo: {}
					}];
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/order/order?type=notWarehousing&orderTypeSelectedIndex=1&tabsIndex=1'
						});
					}, 1000);
				}catch(e){
					uni.hideLoading();
					//TODO handle the exception
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
				}
			},
			async insertConfirm() {
				if (!this.insertData.title) {
					uni.showToast({
						title: '请输入品名',
						icon: 'none'
					});
					return;
				}
				if (!this.insertData.image) {
					this.insertData.image = this.$getImageUrl('/public/images/dihuilogo.png');
				}
				console.log(this.insertData);
				this.list[this.insertIndex].images.push(this.insertData);
				this.list[this.insertIndex].title = this.list[this.insertIndex].images.map(item => item.title).join('/');
				let index = this.insertIndex;
				this.insertPopupClose();
				await this.goodsTypeUpdate(index);
			},
			async goodsTypeUpdate(index) {
				try{
					if (!this.list[index].title) {
						this.$set(this.list[index], 'good_type', '');
						return;
					}
					let res = await getQuantityGoodsType(this.list[index].title);
					this.$set(this.list[index], 'good_type', res?.goods_type?.name);
				}catch(e){
					console.log(e);
				}
			},
			imageChange(list) {
				this.insertData.image = list[0]?.src || '';
			},
			insertPopupOpen(index) {
				this.insertIndex = index;
				this.insertData = {image: '', title: ''};
				this.insertPopupShow = true;
			},
			insertPopupClose() {
				this.insertIndex = null;
				this.insertData = {image: '', title: ''};
				this.insertPopupShow = false;
			},
			async deleteImage(index, imageIndex) {
				this.list[index].images.splice(imageIndex, 1);
				this.list[index].title = this.list[index].images.map(item => item.title).join('/');
				await this.goodsTypeUpdate(index);
			},
			itemDelete(index){
				this.list.splice(index, 1);
			},
			addItem(){
				this.list.push({
					images: [],
					logistics_number: '',
					good_size: '',
					title: '',
					good_type: '',
					good_number: '',
					logistics_name: '',
					warsehouseSelectedInfo: {}
				});
			}
		}
	}
</script>

<style lang="scss">
	.body{
		padding: 30rpx;
		box-sizing: border-box;
		.notice{
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background: #F5F5F5;
			border-radius: 12rpx;
			font-size: 24rpx;
			color: #999;
			font-weight: 500;
			margin-bottom: 20rpx;
		}
		.list{
			width: 100%;
			
			.order{
				width: 100%;
				box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 20rpx;
				position: relative;
				
				.order-content {
					padding:0 30rpx;
					box-sizing: border-box;
					box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
					overflow: hidden;
					border-radius: 20rpx;
					background-color: #fff;
					position: re;
					
					.order-images{
						padding: 30rpx 0;
						position: relative;
						display: flex;
						align-items: stretch;
						justify-content: space-between;
						
						.images-mask{
							position: absolute;
							right: 0;
							top: 0;
							bottom: 0;
							width: 74rpx;
							height: 100%;
							background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
							z-index: 111;
						}
						
						.images-list{
							white-space: nowrap;
							overflow: hidden;
							flex: 1;
							height: 180rpx;
							position: relative;
							
							.images-block{
								display: inline-block;
								color: #FFF;
								width: 74rpx;
								height: 180rpx;
								background-color: #fff;
							}
							
							.images-item{
								display: inline-block;
								margin-right: 16rpx;
								position: relative;
								background-color: #f5f5f5;
								border-radius: 10rpx;
								overflow: hidden;
								// &:last-child{
								// 	margin-right: 100rpx;
								// }
								width: 180rpx;
								height: 180rpx;
								>image{
									width: inherit;
									height: inherit;
									border-radius: 12rpx;
								}
								.image-del{
									width: 40rpx;
									height: 40rpx;
									position: absolute;
									right: 0;
									top: 0;
									>image{
										width: inherit;
										height: inherit;
									}
								}
							}
						}
						
						.insert-btn {
							width: 180rpx;
							height: 180rpx;
							margin-right: 16rpx;
							position: relative;
							background-color: #f5f5f5;
							border-radius: 10rpx;
							overflow: hidden;
							
							.insert-txt {
								width: 100%;
								height: 100%;
								display: flex;
								align-items:  center;
								justify-content: center;
								line-height: 1em;
								font-size: 28rpx;
								color: #999;
							}
						}
					}
					.order-list{
						width: 100%;
						overflow: hidden;
						
						.order-item{
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 30rpx 0;
							border-bottom: 2rpx solid #F5F5F5;
							overflow: hidden;
							
							&:last-child{
								border: none;
							}
							
							.order-item-left{
								font-size: 28rpx;
								color: #666;
								font-weight: 500;
							}
							
							.order-item-right{
								flex: 1;
								overflow: hidden;
								
								.input{
									display: flex;
									width: 100%;
									display: flex;
									align-items: center;
									justify-content: flex-end;
									overflow: hidden;

									.txt,
									.inp,
									.inp-place {
										color:#999;
										font-size:28rpx;
										font-weight: 500;
										text-align: right;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									
									.txt,
									.inp {
										flex: 1;
										color: #333;
									}
									
									.img {
										width: 12rpx;
										height: 15rpx;
										margin-left: 15rpx;
									}
								}
							}
						}
					}
				}
				
				.delete-btn {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #E82E2E;
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					z-index: 112;
					box-shadow: 0 0 14rpx #E82E2E;
					
					.img {
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
		}
		.add{
			margin: 30rpx 0 100rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			.add-icon{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.add-text{
				font-size: 32rpx;
				color: #E82E2E;
				font-weight: bold;
				padding-left: 15rpx;
			}
		}
	}
	.bottom{
		width: 100%;
		height: 150rpx;
		.bottom-content{
			// position: fixed;
			bottom: 200rpx;
			padding: 0 30rpx;
			width: 100%;
			box-sizing: border-box;
			// left: 0;
			// right: 0;
			// z-index: 999;
			.bottom-btn{
				margin-top: 26rpx;
				width: 100%;
				height: 88rpx;
				background: #E82E2E;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #FFF;
				font-weight: bold;
			}
		}
	}
	
	.bottom.hide {
		display: none;
	}

	.insert-popup {
		width: 600rpx;
		
		.insert-body {
			width: 100%;
			padding: 60rpx;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 16rpx;
			
			.insert-item {
				padding-bottom: 30rpx;
				
				.item-title {
					padding-bottom: 20rpx;
					font-size: 28rpx;
					color: #666;
					font-weight: 500;
				}
				
				.item-input {
					width: 100%;
					
					.inp {
						padding: 0 15rpx;
						box-sizing: border-box;
						width: 100%;
						height: 60rpx;
						border-radius: 8rpx;
						border: 1rpx solid #f5f5f5;
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
					
					.inp-place {
						font-size: 26rpx;
						color: #999;
						font-weight: 500;
					}
					
					.sub-btn {
						margin-top: 60rpx;
						width: 100%;
						height: 60rpx;
						border-radius: 60rpx;
						background-color: #E82E2E;
						font-size: 28rpx;
						color: #fff;
						font-weight: 500;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
				
				.item-tips {
					font-size: 24rpx;
					color: #E82E2E;
					padding-top: 10rpx;
				}
			}
			
			.insert-item:last-of-type {
				padding-bottom: 0;
			}
		}
		
		.close-btn {
			padding-top: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.img {
				width: 50rpx;
				height: 50rpx	;
			}
		}
	}
</style>
